<template>
	<div class="good-item">
		<router-link :to="'/details?id=' + goodInfo.Id">
			<div class="img">
				<!-- <img :src="goodInfo.imageUrl" :alt="goodInfo.title" /> -->
				<img v-lazy="goodInfo.imageUrl" :alt="goodInfo.title" />
			</div>
			<h3 class="title">{{ goodInfo.title }}</h3>
			<div class="infor">
				<span class="price">&yen;{{ goodInfo.priceStr }}</span>
				<span class="tips" v-html="goodInfo.mack"></span></div
		></router-link>
	</div>
</template>
<script>
export default {
	name: "GoodItem",
	props: {
		goodInfo: Object,
	},
};
</script>
<style scoped lang="scss">
@import "@/assets/scss/color";
.good-item {
	width: 224px;
	margin: 0 20px 20px 0;
	box-sizing: border-box;
	border: 1px solid #eee;
	&:nth-child(5n) {
		margin-right: 0;
	}
	.img {
		padding: 15px;
		height: 200px;
	}
	.title {
		font-size: 18px;
		margin-left: 20px;
		width: 184px;
		// 不换行
		white-space: nowrap;
		// 超出隐藏
		overflow: hidden;
		// 超出省略号
		text-overflow: ellipsis;
	}
	.infor {
		margin: 10px 20px;
		display: flex;
		justify-content: space-between;
		.price {
			color: $mainColor;
			font-weight: bold;
			font-size: 20px;
		}
		.tips {
			font-size: 14px;
		}
	}
}
</style>
